<template>
	<view :style="[$func.bg('bg.jpg')]" class="main_bg">
		<app-header :hideLeft="true" title="Digital  Human"></app-header>
		<view class="menu flex-c">
			<view class="menu_son flex-s"  @click="$func.toUrl('/pages/user/user')" :style="[$func.bg('index001.png')]">
				<view class="menu_title flex-c">数字自我</view>
				<view class="text">点击进入</view>
			</view>
			<view class="menu_son flex-s" @click="$func.toUrl('/pages/study/study')" :style="[$func.bg('index002.png')]">
				<view class="menu_title flex-c">知识学习</view>
				<view class="text">点击进入</view>
			</view>
			<view class="menu_son flex-s"  @click="$func.toUrl('/pages/scene/scene')" :style="[$func.bg('index003.png')]">
				<view class="menu_title flex-c">虚拟体验</view>
				<view class="text">点击进入</view>
			</view>
			<view class="menu_son flex-s"  @click="$func.toUrl('/pages/help/help')" :style="[$func.bg('index004.png')]">
				<view class="menu_title flex-c">帮助与支持</view>
				<view class="text">点击进入</view>
			</view>
		</view>
	 
		<view class="login_btn flex-c"  @click="$func.toUrl('/pages/login/index')" v-if="!isLogin">立即登录</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {

			}
		},
		
		onShow() {

		},
		onLoad(option) {

		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			isLogin(){
				return this.$store.state.isLogin
			}
		},
		methods: {




		},
		onPullDownRefresh() {

		},
		onReachBottom() {

		}
	}
</script>

<style scoped lang="scss">
	.menu {
		flex-wrap: wrap;
	}

	.menu_son {
		width: 280rpx;
		height: 345rpx;
		background-size: 100% 100%;
		margin: 50rpx 29rpx;
		flex-direction: column;

		.menu_title {
			width: 216rpx;
			height: 104rpx;
			background: rgba(233, 107, 122,1);
			border-radius: 40rpx;
			font-size: 40rpx;
			color: #FFFFFF;
			margin-top: 100rpx;
			
		}
		&:nth-child(2) {
			.menu_title {
				background-color: #7948DD;
			}
		}
		&:nth-child(3) {
			.menu_title {
				background-color: #39DA3F;
			}
		}
		&:nth-child(4) {
			.menu_title {
				background-color: #E1A53B;
			}
		}
		.text {
			margin-bottom: 42rpx;
			color: #FFFFFF;
		}
	}

	.login_btn {
		width: 266rpx;
		height: 72rpx;
		background: rgba(255, 245, 117, 1);
		box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.05);
		opacity: 1;
		border-radius: 36rpx;

		font-size: 32rpx;

		color: #9B751C;
		margin: 100rpx auto 0;

	}
</style>